<template>
  <div class="container">
    <div class="sub-title">我们的优势</div>
    <div class="advantage">

      <div class="node">
        <div class="img">
          <img src="~/static/img/advantage1.png" alt="框架">
        </div>
        <div class="title">框架</div>
        <div class="text">
          从数据出发，仅需几行代码可以轻松构建想要的效果。
        </div>
        <a :href="doc" target="_blank" class="more">了解更多 <i class="el-icon-arrow-right"></i></a>
      </div>

      <div class="node">
        <div class="img">
          <img src="~/static/img/advantage2.png" alt="可靠">
        </div>
        <div class="title">可靠</div>
        <div class="text">
          大量产品实践之上，长期提供支持、完备的文档，后期无忧。
        </div>
        <a :href="doc" target="_blank" class="more">了解更多 <i class="el-icon-arrow-right"></i></a>
      </div>

      <div class="node">
        <div class="img">
          <img src="~/static/img/advantage2.png" alt="开发">
        </div>
        <div class="title">开发</div>
        <div class="text" style="width:200px;">
          兼容Django Admin，任何系统都可以灵活使用，满足你无限的创意。
        </div>
        <a :href="doc" target="_blank" class="more">了解更多 <i class="el-icon-arrow-right"></i></a>
      </div>

    </div>
  </div>
</template>

<script>
import config from "@/utils/config";

export default {
  name: "Advantage",
  data() {
    return {
      doc: config.pro.doc
    }
  }
}
</script>

<style scoped lang="less">
.sub-title {
  margin-top: 20px;
  margin-bottom: 10px;
  color: var(--color);
  text-align: center;
  font-size: 48px;
  white-space: nowrap;

}
.advantage {
  display: flex;
  //margin-top: 20px;
  margin-bottom: 20px;

  .node {
    flex: 1;
    text-align: center;

    .img {
      width: 160px;
      height: 160px;
      margin-left: auto;
      margin-right: auto;

      img {
        max-width: 100%;
        max-height: 100%;
      }
    }

    .title {
      margin-top: 10px;
      margin-bottom: 10px;
      color: var(--color);
      font-size: 24px;
    }

    .text {
      width: 182px;
      margin-bottom: 30px;
      color: #6d7a82;
      font-size: 16px;
      line-height: 1.7rem;
      margin-left: auto;
      margin-right: auto;
      text-align: left;
    }
  }
}
</style>
